<template>
  <base-panel>
    <top-simple-search @addFun="toAdd"></top-simple-search>
    <el-table :data="list" v-loading="loading" class="full-width">
      <el-table-column align="left" type="index" label="序号" min-width="60">
        <template slot-scope="scope">
          {{(pageInfo.page-1)*pageInfo.per_page+scope.$index+1}}
        </template>
      </el-table-column>
      <el-table-column align="left" prop="name" label="名称">
      </el-table-column>
      <el-table-column
        align="left"
        prop="type_id"
        :formatter="typeFormatter"
        label="类型"
      >
      </el-table-column>
      <el-table-column align="left" prop="description" label="描述">
      </el-table-column>
      <el-table-column align="left" prop="creator" label="创建人">
      </el-table-column>
      <el-table-column align="left" prop="gmt_created" label="创建时间" width="200">
      </el-table-column>
      <el-table-column align="left" fixed="right" label="操作" width="100">
        <template slot-scope="{ row }">
          <edit-button @click="toEdit(row)"></edit-button>
          <delete-button @click="toDelete(row.id)"></delete-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="pageInfo.total > 0"
      :total="pageInfo.total"
      :page.sync="pageInfo.page"
      :limit.sync="pageInfo.per_page"
      @pagination="getCustomNotices"
    />
    <add
      :visible.sync="addVisible"
      @reloadList="getCustomNotices"
      :row="currRow"
      v-if="addVisible"
    ></add>
    <!-- 分页 end -->
  </base-panel>
</template>
<script>
import noticesManagement from "@/api/noticesManagement/index";
import add from "./add";
export default {
  components: {
    add
  },
  data() {
    return {
      addVisible: false,
      activeName: "first",
      list: [],
      pageInfo: {
        count: 0,
        page: 1,
        page_num: 10,
        total: 0,
        per_page: 10
      },
      currRow: {},
      loading: false
    };
  },
  created() {
    this.getCustomNotices();
  },
  methods: {
    typeFormatter(row) {
      if (row.type_id == 1) {
        return "hook";
      } else {
        return "站内消息";
      }
    },
    toAdd() {
      this.addVisible = true;
    },
    handleClick(tab, event) {
      //console.log(tab, event);
    },
    getCustomNotices() {
      this.loading = true;
      noticesManagement
        .getCustomNotices({
          page: this.pageInfo.page,
          per_page: this.pageInfo.per_page
        })
        .then(res => {
            this.list = res.data.value;
            this.pageInfo.page = res.data.page;
            this.pageInfo.total = res.data.total;
            this.pageInfo.per_page = res.data.per_page;
          this.loading = false;
        }).catch(()=>{
        this.loading = false;
      });
    },
    toEdit(row) {
      this.currRow = row;
      this.addVisible = true;
    },
    toDelete(id) {
      this.$confirm(
        "确认删除此通知记录? 请在删除前确认没有工作流使用该通知",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }
      ).then(() => {
        noticesManagement.deleteCustomNotices(id).then(res => {
            this.msgSuccess("删除成功!");
            this.getCustomNotices();
        });
      });
    }
  }
};
</script>

<style scoped>
.body {
  margin: 25px;
  background: #fff;
}
.app-container {
  padding: 7px 20px 20px 20px;
}
</style>
